<template>
    <div class="storeinformation">
        <div class="ba_f outmain">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>基本信息</span>
                </div>
            </div>
            <el-form ref="form" :model="form" label-width="180px">
                <el-form-item label="门店名称" :required="true">
                    <el-input v-model="form.name" style="width: 400px" placeholder="请输入门店名称"></el-input>
                </el-form-item>
                <el-form-item label="门店ID">
                    <el-input v-model="form.id" style="width: 400px" disabled></el-input>
                    <el-button @click="copyText(form.id)" class="mar_l10">复制</el-button>
                </el-form-item>
                <el-form-item label="门店LOGO" :required="true">
                    <div class="uploadSource bor_de rel flex" v-if="form.icon">
                        <label class="statusLabel curs" @mouseenter="enter(1)" @mouseleave="leave(1)" >
                            <i class="el-icon-check" ref="imgicon1"></i>
                            <i class="el-icon-close" @click="deleteMultiImage(form.icon,1)"></i>
                        </label>
                        <img :src="form.icon" @click='test(1)' class="wid"/>
                    </div>
                    <div class="uploadSource flex-center curs" v-else @click='test(1)'>
                        <i class="el-icon-plus fon_40 color_d9"></i>
                    </div>
                </el-form-item>
                <el-form-item label="联系人" :required="true">
                    <el-input v-model="form.storeLinkMan" style="width: 400px"
                              placeholder="请输入门店联系人"></el-input>
                </el-form-item>
                <el-form-item label="门店电话" :required="true">
                    <el-input v-model="form.storeTel" style="width: 400px" placeholder="请输入门店电话"></el-input>
                </el-form-item>
                <el-form-item label="所属区域" :required="true">
                    <el-cascader v-model="form.cityArr" :options="data" size='medium' @change='cascaderChange'
                                 filterable></el-cascader>
                </el-form-item>
                <el-form-item label="详细地址" :required="true">
                    <el-input placeholder="请输入详细地址" v-model="form.address" style="width: 400px">
                        <el-button slot="append" @click="searchMapClick">搜索</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label="店铺经纬度">
                    <el-input v-model="form.lng" disabled style="width: 130px" class=""></el-input>
                    <el-input v-model="form.lat" disabled style="width: 130px" class="mar_l20"></el-input>
                </el-form-item>
                <el-form-item label="地图定位">
                    <select-map ref="mapCom" :mapLng='form.lng' :mapLat='form.lat' :mapAddress='form.address'
                                @clickmap='getMapdata'></select-map>
                </el-form-item>
            </el-form>
            <attachment-img ref="img1" type="img" :type2="storeId" @attachment='imgadd1'></attachment-img>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="onSubmit">保存</el-button>
        </div>
    </div>
</template>
<script>
    import attachmentImg from "@/plugins/attachment-img";
    import selectMap from "@/plugins/selectmap";
    import {
        getCity,
        getStoreBasic,
        postStoreBasic,
    } from "@/api/shop";
    import {mapState} from "vuex";

    export default {
        name: "storinformation",
        created() {
            // this.startLoading()
            // this.$baseColorfullLoading(1,'加载中');
            this.initt();
            this.edit();
        },
        computed: {
            ...mapState(['storeId']),
        },
        components: {attachmentImg, selectMap},
        data() {
            return {
                loading: true,
                activeName: '1',
                form: {
                    name: '',
                    icon: '',
                    cityArr: [],
                    lng: 114.304692,
                    lat: 30.59331,
                    isMain: '1',
                    storeTel: '',
                    storeLinkMan: '',
                    storeOpen: '1',
                    address: '湖北省武汉市',
                    id: '',
                },
                storeNumber:'',//门店ID
                data: [],//门店区域
            }
        },
        methods: {
            handleClick() {
                this.edit()
            },
            async initt() {
                const {data} = await getCity({type: 3});
                this.data = data
            },
            copyText(storeId) {
                let Url2 = storeId;
                var oInput = document.createElement('input');
                oInput.value = Url2;
                document.body.appendChild(oInput);
                oInput.select();
                document.execCommand("Copy");
                oInput.className = 'oInput';
                oInput.style.display = 'none';
                this.$message({
                    message: '复制成功',
                    type: 'success'
                });
            },
            async edit() {
                // this.bus.$emit('loading', true);
                const {data} = await getStoreBasic({id:this.storeId,});
                if (data.id) {
                    // this.ShowPage = true
                    this.form = data
                    this.form.lat = +data.lat
                    this.form.lng = +data.lng
                    this.storeNumber = data.storeNumber
                }
                this.bus.$emit('loading', false)
            },
            test(i = 0) {
                console.log(this.$refs, i)
                this.$refs['img' + i].dialogVisible = true
            },
            enter(i=0){
                this.$refs['imgicon' + i].style.display = 'none'
            },
            leave(i=0){
                this.$refs['imgicon' + i].style.display = 'inline-block'
            },
            enterMultigraph(index,i=0){
                //多图删除，i是指文档中的第几个ref多图对象，index图片列表
                // console.log(this.$refs[`list${index}`][index],index)
                this.$refs[`list${i}${index}`][0].style.display = 'none';
            },
            leaveMultigraph(index,i=0){
                this.$refs[`list${i}${index}`][0].style.display = 'inline-block';
            },
            imgadd1(url) {
                this.form.icon = url.str
            },
            deleteMultiImage(item, index, type) {
                //typem没传是单图multigraph多图；index上传图片组件排序
                Array.prototype.remove = function (val) {
                    var index = this.indexOf(val);
                    if (index > -1) {
                        this.splice(index, 1);
                    }
                };
                if (type == 'multigraph') {
                    switch (index) {
                    }
                } else {
                    switch (index) {
                        case 1:
                            this.form.icon = '';
                            break
                    }
                }
            },
            getMapdata(mapAddress, mapLat, mapLng) {
                this.form.address = mapAddress
                this.form.lat = mapLat
                this.form.lng = mapLng
            },
            searchMapClick() {
                console.log(this.$refs.mapCom) //返回的是一个vue对象，所以可以直接调用其方法
                this.$refs.mapCom.searchKeyword();
            },
            async onSubmit() {
                console.log('submit!');
                // this.form.isMain = 1
                // this.form.storeId = this.storeId
                const {msg} = await postStoreBasic(this.form);
                this.$baseMessage(msg, "success");
                this.$router.go(-1)
            },
            cascaderChange(e) {
                this.form.cityArr = e
            },
        }
    }
</script>
<style scoped lang="scss">
    .storeinformation .el-form {
        margin-top: 20px;
    }
</style>
